<template>
	<view class="component-value-transfer">
		<view style="display: flex; margin-bottom: 20rpx;">输入值： <input type="text" v-model="value1" class="input1" /></view>
		<view style="display: flex;  margin-bottom: 20rpx;">回传值： <input type="text" :value="callBackValue" class="output2" /></view>
		
		<comA :value1="value1"></comA>
		<comB @callBackFun="callBack"></comB>
	</view>
</template>

<script>
	import comA from '../../../../components/comA.vue'
	import comB from '../../../../components/comB.vue'
	export default {
		components: {
			comA,
			comB
		},
		data() {
			return {
				value1: "",
				callBackValue: ""
			}
		},
		methods: {
			callBack(msg){
				this.callBackValue = msg;
			}
		}
	}
</script>

<style>
	.component-value-transfer{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.input1 {
		background-color: gray;
		color: red;
	}

	.output2 {
		background-color: gray;
		color: yellow;
	}
</style>